<!DOCTYPE html>
<html>
  <head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
	<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9"/>
	<meta name="Viewport" content="width=device-width; user-scaleable=no; initial-scale=1.0"/>
	<title>jTopo Demo</title>
	<meta name="description" content="jTopo免费的基于HTML5 Canvas的网络拓扑、关系图形库">
	<meta name="keyword" content="jTopo 网络 拓扑 图形库 HTML5 Canvas 免费 关系图形库 javascript topology">	

	<link rel="stylesheet" type="text/css" href="../css/base.css">
	<link href="../css/jquery.snippet.min.css" rel="stylesheet">
	
	<script src="../js/jquery.js"></script>
	<script src="../js/site.js"></script>
	<script src="../js/demo.js"></script>
	
	<script type="text/javascript" src="js/snippet/jquery.snippet.min.js"></script>
	
	<script type="text/javascript" src="../../src/jtopo.js"></script>
	<script type="text/javascript" src="../../src/jtopo.util.js"></script>
	<script type="text/javascript" src="../../src/jtopo.stage.js"></script>
	<script type="text/javascript" src="../../src/jtopo.scene.js"></script>
	<script type="text/javascript" src="../../src/jtopo.element.js"></script>
	<script type="text/javascript" src="../../src/jtopo.node.js"></script>
	<script type="text/javascript" src="../../src/jtopo.link.js"></script>
	<script type="text/javascript" src="../../src/jtopo.container.js"></script>
	<script type="text/javascript" src="../../src/jtopo.layout.js"></script>
	<script type="text/javascript" src="../../src/jtopo.chart.js"></script>
	<script type="text/javascript" src="../../src/jtopo.effect.js"></script>
	
	
	<script type="text/javascript" src="js/toolbar.js"></script>
      <style type="text/css">
          #contextmenu {
              border: 1px solid #aaa;
              border-bottom: 0;
              background: #eee;
              position: absolute;
              list-style: none;
              margin: 0;
              padding: 0;
              display: none;
          }

          #contextmenu li a {
              display: block;
              padding: 10px;
              border-bottom: 1px solid #aaa;
              cursor: pointer;
          }

          #contextmenu li a:hover {
              background: #fff;
          }
      </style>

      <script id='code'>

		$(document).ready(function(){
			var canvas = document.getElementById('canvas');			
			var stage = new JTopo.Stage(canvas);
            //stage.frames = 24;
			//显示工具栏
			showJTopoToobar(stage);
			var scene = new JTopo.Scene(stage);
			scene.background = './img/mind/bg.png';
			
			var root = new JTopo.Node("主题");
            //node.alpha = 0.5;
            root.font = 'italic bold 20px 微软雅黑';
            root.fontColor = '0,0,0';
            root.textPosition = 'Middle_Center';
            root.fillColor = '233,223,152';
            root.setSize(100, 60);
            root.setCenterLocation(canvas.width/2, canvas.height/2);
            scene.add(root);

            function newLink(node, node2){
                var link = new JTopo.Link(node, node2);
                link.paint = function(g){
                    if(this.nodeA == null || ! this.nodeZ == null) return;
                    var midX = (this.nodeA.cx + this.nodeZ.cx) / 2;
                    var midY = (this.nodeA.cy + this.nodeZ.cy) / 2;
                    midY += (this.nodeZ.cy - this.nodeA.cy)/2;
                    g.strokeStyle = 'rgba(' + this.strokeColor + ',' + this.alpha + ')';
                    g.lineWidth = this.lineWidth;
                    g.moveTo(this.nodeA.cx, this.nodeA.cy);
                    g.quadraticCurveTo(midX, midY, this.nodeZ.cx, this.nodeZ.cy);
                    g.stroke();
                };
                link.strokeColor = '255,255,255';
                return link;
            }

            function nearNode(node, x, y){
                if(node == root) return null;
                var nodes = scene.childs;
                for(var i=0; i<nodes.length; i++){
                    var n = nodes[i];
                    if(n === node) continue;
                    if(! n instanceof JTopo.Node) continue;

                    if(n.link){
                        if(n.link.nodeA === node) continue;
                    }
                    var bound = n.getBound();
                    bound.left -= 20;
                    bound.right += 20;
                    bound.top -= 20;
                    bound.bottom += 20;
                    if(x > bound.left && x < bound.right && y > bound.top && y < bound.bottom){
                        return n;
                    }
                }
                return null;
            }

            var currentNode;
            function child(x, y, text){
                var node = new JTopo.Node(text);
                node.setCenterLocation(x, y);
                node.setSize(120, 40);
                node.fontColor = '0,0,0';
                node.textPosition = 'Middle_Center';
                node.fillColor = '164,197,192';
                scene.add(node);
                var link = newLink(root, node);
                node.link = link;
                scene.add(link);

                var dragFlag = false;
                var nearN;
                node.mouseup(function(event){
                    if(dragFlag){
                        if(nearN){
                            nearN.fillColor = nearN.fillColor_bak;
                            this.link.nodeA = nearN;
                            nearN = null;
                        }
                        dragFlag = false;
                    }else{
                        currentNode = this;
                        handler(event);
                    }
                });
                node.mousedrag(function(event){
                    dragFlag = true;
                    if(nearN){
                        nearN.fillColor = nearN.fillColor_bak;
                        nearN = null;
                    }
                    var n = nearNode(node, event.x, event.y);
                    if(n){
                        nearN = n;
                        nearN.fillColor_bak = nearN.fillColor;
                        nearN.fillColor = '254,219,0';
                    }
                });
                return node;
            }

            var textfield = $("#jtopo_textfield");
            scene.dbclick(function(event){
                if(event.target == null) {
                    child(event.x, event.y, '分支主题');
                }else{
                    var e = event.target;
                    textfield.css({
                        top: event.pageY,
                        left: event.pageX - e.width/2
                    }).show().attr('value', e.text).focus().select();
                    e.text = "";
                    textfield[0].JTopoNode = e;
                }
            });

            $("#jtopo_textfield").blur(function(){
                textfield[0].JTopoNode.text = textfield.hide().val();
            });

            var currentNode = null;
            function handler(event){
                if(event.button == 2){// 右键
                    // 当前位置弹出菜单（div）
                    $("#contextmenu").css({
                        top: event.pageY,
                        left: event.pageX
                    }).show();
                }
            }

            /* 右键菜单处理 */
            $("#contextmenu a").click(function(){
                var text = $(this).text();

                if(text == '删除该节点'){
                    scene.remove(currentNode);
                    currentNode = null;
                }if(text == '撤销上一次操作'){
                    currentNode.restore();
                }else{
                    currentNode.save();
                }

                if(text == '更改颜色'){
                    currentNode.fillColor = JTopo.util.randomColor();
                }else if(text == '顺时针旋转'){
                    currentNode.rotate += 0.5;
                }else if(text == '逆时针旋转'){
                    currentNode.rotate -= 0.5;
                }else if(text == '放大'){
                    currentNode.scaleX += 0.2;
                    currentNode.scaleY += 0.2;
                }else if(text == '缩小'){
                    currentNode.scaleX -= 0.2;
                    currentNode.scaleY -= 0.2;
                }
                $("#contextmenu").hide();
            });

            stage.click(function(event){
                if(event.button == 0){// 右键
                    // 关闭弹出菜单（div）
                    $("#contextmenu").hide();
                }
            });
		});
	</script>
  </head>

  <body>
  <ul id="contextmenu" style="display:none;z-index: 999;">
      <li><a>顺时针旋转</a></li>
      <li><a>逆时针旋转</a></li>
      <li><a>更改颜色</a></li>
      <li><a>放大</a></li>
      <li><a>缩小</a></li>
      <li><a>撤销上一次操作</a></li>
      <li><a>删除该节点</a></li>
  </ul>
  <input id="jtopo_textfield" style="display:none;width: 80px;position: absolute;" onkeydown="if(event.keyCode==13)this.blur();"/>
	<center>
	<div class="wrap_div">
		<div class="head_nav">
			<h2 class="logo"><a href="index.html" title="jTopo">jTopo</a></h2>
		</div>		
		<div class="head_nav_second">			
			<ul class="menu" id="nav_menu">
			
			</ul>
		</div>
		<div class="content">
		  <div class="left">
			<ul id="menu">
			
			</ul>
		  </div>
		  <div class="right">
				<div id="content">
					<canvas width="850" height="550" id="canvas"></canvas>	
									
				</div>
		  </div>
		  <div class="clear"></div>
		</div>
	</div>
	</center>
	<div class="footer">
		&nbsp;
	</div>

  
	<script type="text/javascript">var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");document.write(unescape("%3Cspan id='cnzz_stat_icon_1000418207'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "v1.cnzz.com/z_stat.php%3Fid%3D1000418207%26show%3Dpic1' type='text/javascript'%3E%3C/script%3E"));</script>
</body>

</html>